<template>
    <div id="Wallet">
        <div class="content">
            <div class="top">
                <div class="balance">
                    <p>余额(元)</p>
                    <div>
                        ￥0
                        <el-button style="margin-left: 10px;" size="mini" type="primary" @click="dialogVisible = true">
                            提现
                        </el-button>
                    </div>
                </div>
                <div>
                    <p>提现中(元)</p>
                    <div>￥0</div>
                </div>
                <div>
                    <p>待入账(元)</p>
                    <div>￥0</div>
                </div>
                <div>
                    <p>累计提现(元)</p>
                    <div>￥0</div>
                </div>
            </div>

            <div class="selectType">
                <el-radio-group v-model="tabelType" size="small">
                    <el-radio-button label="入账明细"></el-radio-button>
                    <el-radio-button label="提现记录"></el-radio-button>
                </el-radio-group>
            </div>
            <div class="tableBox">
                <div class="search">
                    <el-input size="small" placeholder="搜索订单号、结算/支付/退款流水号" v-model="search1"></el-input>
                    <span>申请日期：</span>
                    <el-date-picker size="small" style="margin-left:20px" v-model="value1" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button type="primary" style="float:right" size="small">导出明细</el-button>
                </div>
                <div class="table_bottom" :style="{ 'height': maxHeight + 'px' }">
                    <el-table :max-height="maxHeight_table" :header-cell-style="{ background: '#EBF1F6' }" :data="tableData"
                        style="width: 100%">
                        <el-table-column prop="date" label="发生时间" width="180">
                        </el-table-column>
                        <el-table-column prop="businessType" label="业务类型" width="180">
                        </el-table-column>
                        <el-table-column prop="category" label="类目">
                        </el-table-column>
                        <el-table-column prop="orderNo" label="订单号">
                        </el-table-column>
                        <el-table-column prop="balanceOfPayment" label="收支类型">
                        </el-table-column>
                        <el-table-column prop="detailBalanceAndpayment" label="收支明细类型">
                        </el-table-column>
                        <el-table-column prop="SettlementAmount" label="结算金额">
                        </el-table-column>
                        <el-table-column prop="modeOfPayment" label="支付方式">
                        </el-table-column>
                        <el-table-column prop="Paymentorder" label="支付流水号">
                        </el-table-column>
                        <el-table-column prop="SettlementOrder" label="结算流水号">
                        </el-table-column>
                        <el-table-column prop="refundOrder" label="退款流水号">
                        </el-table-column>
                        <el-table-column prop="operate" label="操作状态">
                        </el-table-column>
                        <el-table-column prop="remark" label="备注">
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <pagination :data="pageNation_data" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                        </pagination>
                    </div>
                </div>
            </div>


            <el-dialog title="选择提现金额" :visible.sync="dialogVisible" width="500px">
                <el-form :model="form" label-width="100px">
                    <el-form-item label="提现金额">
                        <el-input v-model="form.price" autocomplete="off" style="width: 300px;" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="银行">
                        <el-input v-model="form.brank" autocomplete="off" style="width: 300px;" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡号">
                        <el-input v-model="form.card" autocomplete="off" style="width: 300px;" size="small"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import Pagination from '../../components/PaginationPage/Pagination.vue'

export default {
    components: {
        Pagination,
    },
    data() {
        return {
            form: {
                price:'',
                brank:'',
                card:''
            },
            dialogVisible: true,//
            tabelType: '入账明细',//表格类型
            pageNation_data: {
                total: 0,
                currentPage: 1,
                currentSize: 10,
                small: false
            },// 传递分页组件的数据

            search1: '',
            value1: '',
            tableData: [
                // {
                //     date: '2016-05-02',
                //     businessType: '',
                //     orderNo: '上海市普陀区金沙江路 1518 弄',
                //     category: '',
                //     orderNo: '',
                //     balanceOfPayment: '',
                //     detailBalanceAndpayment: '',
                //     SettlementAmount: '',
                //     modeOfPayment: '',
                //     Paymentorder: '',
                //     SettlementOrder: '',
                //     refundOrder: '',
                //     operate: '',
                //     remark: '',
                // },
            ],

            maxHeight: window.innerHeight - 365,//
            maxHeight_table: window.innerHeight - 405,//表格最大高度

        }
    },
    methods: {
        // f分页组件
        handleSizeChange(val) {
            // 处理每页数量改变的逻辑
            console.log(`每页 ${val} 条`);
            this.pageNation_data.currentSize = val
        },
        handleCurrentChange(val) {
            // 处理当前页码改变的逻辑
            console.log(`当前页: ${val}`);
            this.pageNation_data.currentPage = val
        },
        // 监听窗口大小变化
        handleResize() {
            // 在这里处理窗口大小变化的逻辑
            let screenHeight = window.innerHeight;
            this.maxHeight = screenHeight - 365
            this.maxHeight_table = screenHeight - 405
        },
    },
    mounted() {
        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 移除窗口大小变化的监听
        window.removeEventListener('resize', this.handleResize);
    },

}
</script>

<style lang="scss" scoped>
.table_bottom {
    position: relative;

    .pagination {
        position: absolute;
        bottom: 0px;
        right: 0px;
        // background-color: #8092c9;
        width: 100%;
    }
}

::v-deep .content {
    padding: 20px;

    .top {
        align-content: center;
        background-color: white;
        display: flex;
        justify-content: space-between;
        padding: 25px 60px;
        height: 65px;
        line-height: 30px;

        div {
            div {
                display: flex;
                align-items: center;
                font-weight: bold;
                margin-top: 5px;
            }
        }
    }

    .selectType {
        padding: 20px 0;
        height: 35px;
    }

    .tableBox {
        background-color: white;
        padding-top: 20px;

        .search {
            padding: 0 50px 20px 20px;

            .el-input {
                width: 282px;
                margin-right: 50px;

                input {
                    background-color: #F0F3FC;
                }
            }

        }
    }
}
</style>